<template>
    <div class="wrapper">
        <ul>
            <li v-for="(item, index) in arr" 
            :key="index"
            :style='{"background-image": "url("+item.src+")"}'>
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import {topicsArray} from '@/assets/data/home-topics.js'
export default ({
    name: 'HomeTopics',
    data() {
        return {
            arr: topicsArray
        }
    }
})
</script>

<style lang="scss" scoped>
.wrapper {
    ul {
        display: grid;
        grid-template-columns: auto auto;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        li {
            height: 100px;
            border-radius: 10px;
            box-sizing: border-box;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
            position: relative;
            &::before {
                width: 100%;
                height: 100%;
                content: "";
                background: linear-gradient(
                    to right,
                    rgba(0, 0, 0, .6),
                    rgba(0, 0, 0, 0)
                    );
                position: absolute;
                top: 0;
                left: 0;
            }
            p {
                width: 60%;
                font-size: 16px;
                font-weight: bold;
                color: white;
                text-shadow: 0px 0px 8px black;
                position: absolute;
                top: 40%;
                left: 10%;
            }
        }
    }
}
</style>